<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>echarts初体验</title>
  </head>
  <body>
    <div id="main" style="width: 600px; height: 400px"></div>
    <div class="pie" style="width: 600px; height: 400px"></div>
    <div class="line" style="width: 600px; height: 400px"></div>
    <div class="barChart" style="width: 600px; height: 400px"></div>

    <script src="./dist/echarts.min.js"></script>
    <script>
      const dom = document.querySelector("#main")
      const myChart = echarts.init(dom)
      //   var option = {
      //     xAxis: {
      //       type: "category",
      //       data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      //     },
      //     yAxis: {
      //       type: "value",
      //     },
      //     series: [
      //       {
      //         data: [820, 932, 901, 934, 1290, 1330, 1320],
      //         type: "line",
      //       },
      //     ],
      //   }
      var option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            name: "线形图",
          },
          {
            data: [22, 333, 111, 222, 444, 666, 777],
            type: "bar",
            name: "饼状图",
          },
        ],
        grid: {
          show: true,
        },
        title: {
          text: "标题",
        },
        tooltip: {
          padding: 20,
        },
        legend: {
          data: ["线形图"],
        },
        color: ["red", "green"],
      }
      myChart.setOption(option)
    </script>
    <!-- 饼图 -->
    <script>
      function pieChart() {
        let myChart = echarts.init(document.querySelector(".pie"))
        let option = {
          tooltip: {
            // {a} 表示series中的name
            // {b} 表示数据中的series.data中的name
            // {c} 表示每一项的值
            // {d} 表示百分比
            formatter: "{a} <br />{b} <strong>{c}</strong>人 占比{d}%",
          },
          title: {
            text: "籍贯",
            textStyle: {
              color: "#6d767e", // 标题演示
            },
          },
          series: [
            {
              name: "各地学员分布",
              type: "pie", // pie 表示饼图
              radius: ["10%", "65%"], // 内外圈的半径
              center: ["50%", "50%"], // 中心点
              roseType: "area", // area表示面积模式，radius表示半径模式
              itemStyle: {
                // 每一项的设置
                borderRadius: 4, // 扇形边缘圆角设置
              },
              data: [
                { value: 40, name: "北京" },
                { value: 38, name: "山东" },
                { value: 32, name: "上海" },
                { value: 30, name: "江苏" },
                { value: 28, name: "河北" },
                { value: 26, name: "山西" },
                { value: 22, name: "河南" },
                { value: 18, name: "辽宁" },
              ],
            },
          ],
        }
        myChart.setOption(option)
      }
      pieChart()
    </script>
    <!-- 折线图 -->
    <script>
      function lineChart() {
        let myChart = echarts.init(document.querySelector(".line"))
        let option = {
          // 图例
          legend: {
            top: 20,
          },
          // 鼠标移入的提示
          tooltip: {
            trigger: "axis", // 轴触发
            position: function (pt) {
              // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
              // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
              return [pt[0], "10%"]
            },
          },
          // 标题
          title: {
            text: "薪资 Salary",
            textStyle: {
              color: "#6d767e",
            },
          },
          xAxis: {
            type: "category",
            boundaryGap: false, // x轴两边的留白策略，false表示不留空白
            data: ["张三", "李四", "张飞", "赵云", "狗哥", "张三", "李四", "张飞", "赵云", "狗哥", "张三", "李四", "张飞", "赵云", "狗哥", "张三", "李四", "张飞", "赵云", "狗哥"],
          },
          yAxis: {
            type: "value",
            // Y轴类型为value，则留白策略指的是对数据的延伸。
            // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
            boundaryGap: [0, "50%"],
          },
          // 数据缩放组件
          dataZoom: [
            // {
            //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
            //   start: 0,
            //   end: 10
            // },
            {
              type: "slider", // 拖动条显示到轴的外面（默认就是slider类型）
              start: 0, // 拖动滑块起始位置（这是一个百分比）
              end: 15, // 拖动滑块结束位置（这是一个百分比）
            },
          ],
          // 数据部分
          series: [
            {
              name: "期望薪资",
              type: "line",
              smooth: true, // 表示使用平滑曲线
              symbol: "none", // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
              itemStyle: {
                // 单独控制这条线的颜色
                color: "#ee6666",
              },
              data: [8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000],
            },
            {
              name: "实际薪资",
              type: "line",
              smooth: true,
              symbol: "none",
              itemStyle: {
                // 单独控制这条线的颜色
                color: "#5470c6",
              },
              data: [9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 8300, 9600, 15000, 17000, 12000, 13000],
            },
          ],
        }
        myChart.setOption(option)
      }
      lineChart()
    </script>
    <script>
      function barChart() {
        let myChart = echarts.init(document.querySelector(".barChart"))
        let option = {
          // 网格（整个图表区域设置）
          grid: {
            top: 30,
            bottom: 30,
            left: "7%",
            right: "7%",
            show: false,
          },
          // 鼠标移入的提示
          tooltip: {
            trigger: "axis", // 触发方式，axis表示轴触发，item表示每一项
            axisPointer: {
              // 坐标轴指示器配置项
              // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          // 图例
          legend: {},
          // X轴
          xAxis: [
            {
              type: "category",
              data: ["1组", "2组", "3组", "4组", "5组", "6组", "7组"],
              axisPointer: {
                // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
                type: "shadow",
              },
            },
          ],
          // Y轴
          yAxis: [
            {
              type: "value",
              min: 0, // y轴数据最小值
              max: 100, // y轴数据最大值
              interval: 10, // step步长，把y轴的数据分成多少份
              axisLabel: {
                // Y轴文字设置
                formatter: "{value}分", // Y轴文字
              },
            },
            {
              type: "value",
              min: 0,
              max: 10,
              interval: 1,
              axisLabel: {
                formatter: "{value}人",
              },
            },
          ],
          // 数据部分（4组数据）
          series: [
            {
              name: "平均分",
              type: "bar",
              data: [83, 57, 90, 78, 66, 76, 77, 87, 69, 92, 88, 78],
              barWidth: "15",
            },
            {
              name: "低于60分人数",
              type: "bar",
              data: [2, 1, 3, 4, 2, 5, 2, 2, 4, 1, 6, 2],
              barWidth: "15",
              yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
            },
            {
              name: "60到80分之间",
              type: "bar",
              yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
              barWidth: "15",
              data: [1, 4, 2, 4, 5, 2, 1, 3, 3, 2, 2, 4],
            },
            {
              name: "高于80分人数",
              type: "bar",
              yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
              barWidth: "15",
              data: [3, 2, 1, 5, 1, 2, 3, 4, 5, 2, 2, 4],
            },
          ],
        }
        myChart.setOption(option)
      }
      barChart()
    </script>
  </body>
</html>
